<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<view class="order_tab">
			<view v-for="(item, index) in navList" class="order-tab-left" :class="{active: curNav == item.navId}" :key="index" @click="switchNav(item.navId, index)">
				<view>{{item.name}}</view>
				<view :class="{descline: curNav == item.navId}"></view>
			</view>
		</view>
		
		<view class="order-list-box">
			<view class="order-item" v-for=" (item ,index) in orderList" :key="index">
				<view class="order-item-top" @click="JumpShop(item.businessId)">
					<view class="order-item-name">{{item.businessName}}</view>
					<view class="order-item-label" style="color: #999999;" v-if="item.status== 0 || item.status == 4">{{curNav==0 ? '已预约' : '已完成'}}</view>
					<view class="order-item-label" style="color: #999999;" v-if="item.status== 2">已失效</view>
					<view class="order-item-label" style="color:#FA6400;" v-if="item.status== 1" @tap.stop="toComment(item.id,index)">待评价
						<uni-icons type="right" color="#FA6400" size="14" ></uni-icons>
					</view>
				</view>
				
				<view class="order-item-info" @click="JumpQrCode(item)">
					<image :src="item.thumb_img" mode="aspectFill"></image>
					<view class="order-item-info-right">
						<view class="order-item-info-time">
							预约时间：{{item.appointmentDate}} {{item.startTime}}-{{item.endTime}}
						</view>
						<view class="order-item-info-address">
							地址：{{item.businessAddress}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pageBottom">{{loadingtips}}</view>
	</view>
</template>

<script>
	import {  bookingList,StoreWriteOff } from '../../apis/booking.js';
	var app = getApp();
	export default {
		data() {
			return {
				
				navList: [
					{ name: '即将开始', navId: 0},
					{ name: '已完成', navId: 1},
					{ name: '已失效', navId: 2},
					
				],
				
				loadingtips:'没有更多了，快去预约吧',
				
				statusBarHeight: 0,
				windowHeight: 0,
				btnViewHeight: 50,
				
				orderList:[],
				isLastPage:false,
				currentPage: 1,
				pageSize: 10,
				curNav :0
			}
		},
		onShow(){
			this.currentPage = 1;
			this.orderList = [];
			this.isLastPage = false
			this.getOrderList();
		},
		
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight = this.menuButtonInfo.height +  (this.menuButtonInfo.top - this.statusBarHeight) * 2;
			this.windowHeight = uni.getSystemInfoSync().windowHeight - this.btnViewHeight - 50;
		},
		
		onPullDownRefresh(){
			console.log('下啦刷新');
			// this.clearList();
			
			this.currentPage = 1;
			this.orderList = [];
			this.isLastPage = false
			this.getOrderList();
			uni.stopPullDownRefresh();
		},
		
		onReachBottom() {
			if(!this.isLastPage){
				this.loadingtips = '下拉加载更多'
				this.currentPage++;
				// this.getList(this.adCode);
				this.getOrderList();
					
			}else {
				this.loadingtips = '没有更多了，快去预约吧'
			}
		},
		
		methods: {
			//  晴空数据
			clearList(){
				this.curNav = 0
				this.currentPage = 1
				this.orderList = []
				this.isLastPage = false
			},
		
			getOrderList(){
				let that = this;
				let status = that.curNav == 0? [0] : that.curNav == 1 ?[1,4]:[2]; // 2 超时 3 取消
				const parms = {
					"page": that.currentPage,
					"pageSize": that.pageSize,
					'status':status
				}
				bookingList(parms).then(res => {
					that.isLastPage = res.data.is_last_page;
					if(res.data.data && res.data.data.length>0){
						that.orderList = that.orderList.concat(res.data.data)
					}
				})
			},
			
				// 导航切换
			switchNav(id, index) {
				this.curNav = id
				this.currentPage = 1;
				this.orderList = []
				this.isLastPage = false;
				this.getOrderList();
			},
			
			JumpShop(id){
				uni.navigateTo({
					url: '../storeDetail/storeDetail?store_id=' + id ,
					fail: (res) => {
						console.log(res)//打印错误信息
					}
				});
			},
			
			JumpQrCode(item){
				if(item.status == 0){
					uni.navigateTo({
						url:'../orderResult/orderResult?orderId='+item.id
					})
				}
			},
			toComment(id,index){
				uni.setStorageSync('thumbImg',this.orderList[index].thumb_img);
				console.log(this.orderList[index].thumb_img)
				uni.navigateTo({
					url:`../userComment/userComment?id=${id}&type=booking`
				})
			},
		}
	}
</script>

<style>
page{
	
background: #F4F4F4;
}
</style>

<style lang="scss" scoped>
.order_tab{
	background-color: #FFFFFF;
	display: flex;
	padding: 20rpx 30rpx;
	color: #999999;
	
	.order-tab-left {
		margin-right: 50rpx;
	}
	view {
		font-size: 32rpx;
		line-height: 45rpx;
		&.active{
			font-size: 34rpx;
			color:#000;
			font-weight: 600;
			font-weight: bold;
		}
		.descline{
			width: 100%;height: 10rpx;
			background-color: #FA6400;
			margin-top: -15rpx;
		} 
	}
}

.pageBottom {
	font-size: 24rpx;
	color: #999999;
	margin: 40rpx auto;text-align: center;
	line-height: 50rpx;
}

.order-list-box {
	margin: 30rpx auto;
	width: 690rpx;
	
	.order-item {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		.order-item-top {
			line-height: 40rpx;
			display: flex;justify-content: space-between;
			padding-bottom: 30rpx;margin-bottom: 30rpx;
			border-bottom: 1rpx solid #EFEFEF;
			font-size: 28rpx;
			.order-item-name {
				font-weight: 600;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.order-item-info {
			display: flex;
			image {
				width: 116rpx;height: 116rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.order-item-info-right {
				width: 495rpx;
				.order-item-info-time {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}
				.order-item-info-address {
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
				}
			}
		}
	}
}
</style>
